<template>
	<view class="container">
		<!-- 导航栏 -->
		<NavBar :title="title" />
		<!-- 显示类型对应的数据 -->
		<view class="play">
			<view class="play-btn">
				<view class="play-btn-title"> 活动状态 | </view>
				<view class="play-btn-right">
					<view class="" v-for="(i, index) in items" :key="index" @click="toggleCurrent(index)">
						<view @click="chooseItem(index)" :style="current == index ? 'color: #3B95FF' : ''">
							{{ i }}
						</view>
					</view>
				</view>
			</view>

			<view class="content" v-if="total">
				<view v-show="current === 0">
					<view class="" v-for="(item, index) in playContainArr" :key="index">
						<PlayContain :itemObj="item" @click="clickPlayContain(item)" />
					</view>
				</view>
				<view v-show="current === 1">
					<view class="" v-for="(item, index) in playContainArr" :key="index">
						<PlayContain :itemObj="item" @click="clickPlayContain(item)" />
					</view>
				</view>
				<view v-show="current === 2">
					<view class="" v-for="(item, index) in playContainArr" :key="index">
						<PlayContain :itemObj="item" @click="clickPlayContain(item)" />
					</view>
				</view>
				<view v-show="current === 3">
					<view class="" v-for="(item, index) in playContainArr" :key="index">
						<PlayContain :itemObj="item" @click="clickPlayContain(item)" />
					</view>
				</view>
			</view>
			<NoData v-else />
		</view>
	</view>
</template>

<script>
	import {
		apiActivityList, // 获取活动列表
	} from "../../net/dagnqunhuodong.js";
	import NavBar from "@/components/NavBar.vue";
	import NoData from "@/components/NoData.vue";
	import PlayContain from "../common/play-contain.vue";
	export default {
		components: {
			NavBar,
			NoData,
			PlayContain,
		},
		data() {
			return {
				title: '',
				typeId: 1,
				playContainArr: [],
				items: ["全部", "未开始", "进行中", "已结束"],
				current: 0,
				total: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
					activityStatus: null, //状态
					activityType: null, //类型
				},
				identityInfo: true, //判断身份信息
			};
		},
		onLoad(val) {
			let item = JSON.parse(val.item);
			console.log(item);
			this.title = item.name;
			this.params.activityType = item.enumId;
			// 获取当前登录人身份信息
			let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
			if (permission.indexOf("common") > -1) {
				this.identityInfo = false;
			}
			if (permission.indexOf("admin") > -1 || permission.indexOf("superAdmin") > -1) {
				this.identityInfo = true;
			}
			this.getActivityList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.current = 0;
			this.playContainArr = [];
			this.params.pageNum = 1;
			this.params.pageSize = 10;
			this.getActivityList();
		},
		// 上拉加载
		onReachBottom() {
			if (this.params.pageNum * this.params.pageSize >= this.total) {
				uni.showToast({
					title: '数据全部加载',
					duration: 2000
				});
				return;
			} else {
				this.params.pageNum++;
				this.getActivityList();
			}
		},
		methods: {
			// 点击数据详情
			clickPlayContain(item) {
				let params = {
					...item,
					flag: false,
					navTitle: "活动详情",
				};

				uni.setStorage({
					key: "itemParams",
					data: JSON.stringify(params),
				});

				uni.navigateTo({
					url: `../DJinitiateActivitiesInfos/index`,
				});
			},

			// 切换活动状态
			toggleCurrent(current) {
				this.params.pageNum = 1;
				this.playContainArr = [];
				this.total = 0;
				if (current == 0) {
					this.params.activityStatus = null;
				} else {
					this.params.activityStatus = current;
				}
				this.getActivityList();
			},

			// 获取活动列表
			getActivityList() {
				apiActivityList(this.params)
					.then((res) => {
						console.log(res);
						this.playContainArr = this.playContainArr.concat(res.data);
						this.total = res.total;
						uni.stopPullDownRefresh();
					})
					.catch((err) => {
						console.log(err);
						this.playContainArr = [];
						uni.stopPullDownRefresh();
					});
			},


			// 点击活动状态
			chooseItem(index) {
				this.current = index;
			},

			clickRightFn() {
				uni.removeStorage({
					key: "itemParams"
				})
				uni.navigateTo({
					url: "../DJinitiateActivities/index",
				});
			},

		},
	};
</script>

<style>
	page {
		background: #fff;
	}

	.container {
		width: 750rpx;
		height: calc(100vh - 200rpx);
		padding-bottom: 20rpx;
		background: #fff;
		font-size: 30rpx;
		position: relative;
		margin-bottom: 10rpx;
	}


	/* 活动 */
	.play {
		margin: 0 auto;
		width: 730rpx;
		position: relative;
	}

	.play-btn {
		width: 750rpx;
		height: 80rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #fff;
	}

	.play-btn-title {
		flex: 2;
	}

	.play-btn-right {
		flex: 5;
		display: flex;
	}

	.play-btn-right view {
		display: inline-block;
		flex: 1;
	}

	.content {
		height: 100%;
		overflow-y: scroll;
		margin-bottom: 20rpx;
		padding: 0 20rpx;
	}
</style>